import * as echarts from "echarts";
import ReactECharts from "echarts-for-react";
import React from "react";
const waveEcharts = () => {
  // 生成双波形数据
  const generateWaveData = () => {
    const data1 = [];
    const data2 = [];
    const data3 = [];
    for (let i = 0; i < 200; i++) {
      const t = i / 20;
      // 第一条波形
      data1.push([i, Math.sin(t) * 16 + Math.sin(t * 1.5) * 0.4]);
      // 第二条波形（相位差）
      data2.push([i, Math.sin(t + 1) * 10 + Math.sin((t + 0.5) * 1.5) * 0.3]);
      data3.push([i, Math.sin(t + 1) * 0.5 + Math.sin((t + 0.5) * 1.5) * 0.9]);
    }
    return [data1, data2, data3];
  };

  const [wave1Data, wave2Data, wave3Data] = generateWaveData();

  // 湿度波形图配置
  const humidityOption = {
    grid: {
      top: 50,
      left: 10,
      right: 10,
      // bottom: 20,
    },
    xAxis: {
      type: "value",
      show: false,
    },
    yAxis: {
      type: "value",
      show: false,
    },
    series: [
      {
        data: wave1Data,
        type: "line",
        smooth: true,
        symbol: "none",
        lineStyle: {
          width: 2,
          color: "#32cd32", // 绿色波形
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(50, 205, 50, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(50, 205, 50, 0)",
            },
          ]),
        },
        z: 2,
      },
      {
        data: wave2Data,
        type: "line",
        smooth: true,
        symbol: "none",
        lineStyle: {
          width: 2,
          color: "#37a2da", // 蓝色波形
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(55, 162, 218, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(55, 162, 218, 0)",
            },
          ]),
        },
        z: 1,
      },
      {
        data: wave3Data,
        type: "line",
        smooth: true,
        symbol: "none",
        lineStyle: {
          width: 2,
          color: "#37a2da", // 蓝色波形
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(55, 162, 218, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(55, 162, 218, 0)",
            },
          ]),
        },
        z: 1,
      },
    ],
  };

  return (
    <div>
      <div style={{ height: "80px" }}>
        <ReactECharts option={humidityOption} style={{ height: "100%" }} />
      </div>
    </div>
  );
};
export default waveEcharts;
